<template>
  <div class="read">
    <myHead></myHead>
    <section>
      <p class="flex head">

      <nav class="title">
        <span :class="active == 1 ? 'active' : ''" @click="active = 1"
          >默认</span
        >
        <span :class="active == 2 ? 'active' : ''" @click="active = 2"
          >上新</span
        >
        <span :class="active == 3 ? 'active' : ''" @click="active = 3"
          >销量</span
        >
        <span :class="active == 4 ? 'active' : ''" @click="active = 4"
          >活动</span
        >
      </nav>
<van-dropdown-menu style="height:30px;" class="filter" active-color="#f01414">
  <van-dropdown-item @change="getData" title-class="filter" v-model="value1" title="筛选" :options="option1" />
</van-dropdown-menu>
      </p>
      <ul class="">
        <li class="flex" v-for="(l,i) in content" :key="i">
          <img :src="l.img" alt="">
          <div class="main">
            <h5>{{l.title}}</h5>
            <p class="desc">{{l.count}}节 · {{l.desc}}</p>
            <p class="author">{{l.author}} · {{l.authorLv}}</p>
            <p class="bottom flex"><b class="price">￥{{l.price}}.00</b> <span class="order">{{l.people}}人订阅<span class="tryRead">试读</span></span></p>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<style lang="scss" scoped>
ul {
  li {
    margin-bottom: 10px;
    img {
      border-radius: 20px;
    }
    .main {
      margin-left: 5px;
      h5 {
        font-size: 0.4rem;
        line-height: 0.56rem;
        margin-bottom: 0.16rem;
        font-weight: 700;
        color: #2b333b;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
        word-wrap: break-word;
      }
      .desc {
        display: inline-block;
        margin-bottom: 0.21333333rem;
        font-size: 0.32rem;
        padding-top: 0.10666667rem;
        padding-bottom: 0.10666667rem;
        padding-left: 0.21333333rem;
        padding-right: 0.21333333rem;
        line-height: 0.45333333rem;
        border-radius: 0.10666667rem;
        color: #2b333b;
        background: rgba(0, 0, 0, 0.04);
      }
      .author {
        margin-bottom: 0.26666667rem;
        font-size: 0.32rem;
        line-height: 0.45333333rem;
        color: #71777d;
      }
      .bottom {
        justify-content: space-between;
        .price {
          font-size: 0.4rem;
          line-height: 0.50666667rem;
          padding-right: 0.10666667rem;
          font-weight: 700;
          color: #37f;
        }
        .order {
          color: #71777d;
          font-size: 0.29333333rem;
          line-height: 0.42666667rem;
          padding-right: 0.08rem;
        }
        .tryRead {
          display: inline-block;
          color: #37f;
          font-weight: 700;
          text-align: center;
          background: rgba(51, 119, 255, 0.1);
          width: 0.90666667rem;
          height: 0.50666667rem;
          font-size: 0.32rem;
          line-height: 0.50666667rem;
          border-radius: 0.33333333rem;
          margin-left: 5px;
        }
      }
    }
  }
}
.title {
  margin-bottom: 10px;
  span {
    margin-right: 20px;
    color: #71777d;
    font-size: 14px;
  }
  .active {
    color: black;
    font-weight: 700;
  }
}
.head {
  justify-content: space-between;
  margin-bottom: 10px;
  .filter {
    margin-top: -15px;
  }
}
</style>

<script>
export default {
  data() {
    return {
      value1: "0",
      option1: [
        { text: "全部", value: 0 },
        { text: "前端开发", value: 1 },
        { text: "后端开发", value: 2 },
        { text: "移动开发", value: 3 },
        { text: "计算机基础", value: 4 },
        { text: "前沿技术", value: 5 },
        { text: "云计算&大数据", value: 6 },
        { text: "运维&测试", value: 7 },
        { text: "数据库", value: 8 },
        { text: "其他", value: 9 },
      ],
      active: 1,
      axios: {
        "id|+1": 1, //生成课程id，自增1
        title: "@ctitle(10)", //生成课程名
        "price|30-100": 3, //随机生成课程价格 在30-1000之间
        "count|20-80": 20, //章节数
        desc: "@ctitle(20)", //生成课程描述
        img: "@Image('98x111','#6ff','#f7f0d4','zhuan lan')", //生成随机图片，大小/背景色/字体颜色/文字信息
        author: "@ctitle(4)", //生成作者名
        "authorLv|1": [
          "BAT高级工程师",
          "前端架构师",
          "十年资深架构师",
          "资深数据库工程师",
          "Go语言技术专家",
        ], //等级是数组中的一个
        "people|100-1000": 100,
      },
      content: [],
    };
  },
  methods: {
    getData() {
      this.$axios
        .post("/read/content", { body: this.axios })
        .then((res) => {
          // console.log(res);
          this.content = res.data["data"];
          console.log(this.content);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.getData();
  },
  watch: {
    active: "getData",
  },
};
</script>